<template>
  <div style="font-size: 28px;">
    <div class="table">
      <el-row :gutter="10" style="margin-bottom: 60px;">
        <el-col :span="12">
          <el-card style="color: #63be2e">
            <div>资产总数目</div>
            <div style="padding: 10px; text-align: center; font-weight: bold">
              {{ assetCount }}件
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card style="color: #e37474;">
            <div>资产总价值</div>
            <div style="padding: 10px; text-align: center; font-weight: bold">
              ￥ {{ assetMoney }}元
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-bottom: 60px">
        <el-col :span="12">
          <el-card style="color: #3c81da">
            <div>总借出次数</div>
            <div style="padding: 10px; text-align: center; font-weight: bold">
              {{ lendCount }}次
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card style="color: #b0b8d7">
            <div>总维修次数</div>
            <div style="padding: 10px; text-align: center; font-weight: bold">
              {{ maintainCount }}次
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card" id="main" style="margin: 0 auto;width: 600px; height: 500px">
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" id="pie" style="margin: 0 auto;width: 600px; height: 500px">
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import * as echarts from "echarts";

export default {
  name: "Home",
  data() {
    return {
      assetCount: 0,
      assetMoney: 0,
      lendCount: 0,
      maintainCount: 0,
    };
  },
  mounted() {
    var option = {
      title: {
        text: "资产状态统计",
        left: "center",
      },
      xAxis: {
        type: "category",
        data: ["正常", "借出", "维修", "报废"],
      },
      yAxis: {
        type: "value",
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          data: [],
          type: "bar",
        },
      ],
    };
    var chartDom1 = document.getElementById("main");
    var myChart1 = echarts.init(chartDom1);
    this.request.get("/echarts/states").then((res) => {
      if (res.success) {
        let txt = res.data.map((obj, index) => {
          return obj.key;
        }).join(",").split(',');
        option.xAxis.data = txt;
        let val = res.data.map((obj, index) => {
          return obj.num;
        }).join(",").split(',');
        option.series[0].data = val;
        myChart1.setOption(option);
      }
    });

    // 饼图
    var chartDom2 = document.getElementById("pie");
    var myChart2 = echarts.init(chartDom2);
    var pieOption;

    pieOption = {
      title: {
        text: "用户部门统计",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [],
        },
      ],
    };
    this.request.get("/echarts/userDepart").then((res) => {
      if (res.success) {
        let arr = [];
        res.data.forEach(e => {
          arr.push({name: e.key, value: e.num})
        });
        pieOption.series[0].data = arr;
        myChart2.setOption(pieOption);
      }
    });

    this.request.get("/echarts/assetcount").then((res) => {
      if (res.success) {
        this.assetCount = res.data;
      }
    });

    this.request.get("/echarts/assetmoney").then((res) => {
      if (res.success) {
        this.assetMoney = res.data;
      }
    });

    this.request.get("/echarts/lendcount").then((res) => {
      if (res.success) {
        this.lendCount = res.data;
      }
    });

    this.request.get("/echarts/maintaincount").then((res) => {
      if (res.success) {
        this.maintainCount = res.data;
      }
    });
  },
};
</script>
<style>
.table .el-card {
  height: 150px;
}
</style>